<template>
	<div class="my-tabs">
		<ul class="flx-bm" :class="ulClass">
      <li v-for="(i, n) in category" :key="n" @click="onclick(i)" :class="[liClass, activeTab === i?actClass:unactClass]">{{i}}</li>
    </ul>
    <div class="my-tab-content" :class="contentClass">
      <slot></slot>
    </div>
	</div>

</template>

<script>
  export default {
    props: {
      actTab: {
        type: String,
        default: ''
      },
      ulClass: {
        type: String,
        default: ''
      },
      liClass: {
        type: String,
        default: ''
      },
      contentClass: {
        type: String,
        default: ''
      },
      actClass: {
        type: String,
        default: ''
      },
      unactClass: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        activeTab: this.actTab !== '' ? this.actTab : this.$slots.default[0].componentOptions.propsData.title
      }
    },
    computed: {
      category () {
        let arr = this.$slots.default
        let res = []
        arr.forEach((item) => {
          res.push(item.componentOptions.propsData.title)
        })
        return res
      }
    },
    mounted() {
      this.$emit('tabs-act-tab', this.activeTab)
    },
    methods: {
      onclick(i) {
        this.activeTab = i
        this.$emit('tabs-act-tab', i)
      }
    }
  }
</script>

<style scoped lang="stylus">

</style>
